import * as echarts from 'echarts'

export function echarts1(data) {
  return {
    title: [
      {
        text: "男性",
        x: "center",
        top: "55%",
        textStyle: {
          color: "#FFFFFF",
          fontSize: 16,
          fontWeight: "100",
        },
      },
      {
        text: data+"%",
        x: "center",
        top: "30%",
        textStyle: {
          fontSize: "20",
          color: "#FFFFFF",
          fontFamily: "DINAlternate-Bold, DINAlternate",
          foontWeight: "600",
        },
      },
    ],
    polar: {
      radius: ["60%", "80%"],
      center: ["50%", "50%"],
    },
    angleAxis: {
      max: 100,
      show: false,
    },
    radiusAxis: {
      type: "category",
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: "",
        type: "bar",
        roundCap: true,
        barWidth: 50,
        showBackground: true,
        backgroundStyle: {
          color: "rgba(66, 66, 66, .3)",
        },
        data: [Number(data)],
        coordinateSystem: "polar",

        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "#04b5c1",
              },
              {
                offset: 1,
                color: "#066e89",
              },
            ]),
          },
        },
      },
      {
        name: "",
        type: "pie",
        startAngle: 80,
        radius: ["60%"],
        hoverAnimation: false,
        center: ["50%", "50%"],
        itemStyle: {
          color: "rgba(66, 66, 66, .1)",
          borderWidth: 1,
          borderColor: "#5269EE",
        },
        data: [100],
      },
      {
        name: "",
        type: "pie",
        startAngle: 80,
        radius: ["80%"],
        hoverAnimation: false,
        center: ["50%", "50%"],
        itemStyle: {
          color: "rgba(66, 66, 66, .1)",
          borderWidth: 1,
          borderColor: "#5269EE",
        },
        data: [100],
      },
    ],
  };
}
export function echarts2(data) {
  return {
    title: [
      {
        text: "女性",
        x: "center",
        top: "55%",
        textStyle: {
          color: "#FFFFFF",
          fontSize: 16,
          fontWeight: "100",
        },
      },
      {
        text: data+"%",
        x: "center",
        top: "30%",
        textStyle: {
          fontSize: "20",
          color: "#FFFFFF",
          fontFamily: "DINAlternate-Bold, DINAlternate",
          foontWeight: "600",
        },
      },
    ],
    polar: {
      radius: ["60%", "80%"],
      center: ["50%", "50%"],
    },
    angleAxis: {
      max: 100,
      show: false,
    },
    radiusAxis: {
      type: "category",
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: "",
        type: "bar",
        roundCap: true,
        barWidth: 60,
        showBackground: true,
        backgroundStyle: {
          color: "rgba(66, 66, 66, .3)",
        },
        data: [Number(data)],
        coordinateSystem: "polar",

        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "#009bdf",
              },
              {
                offset: 1,
                color: "#009bdf",
              },
            ]),
          },
        },
      },
      {
        name: "",
        type: "pie",
        startAngle: 80,
        radius: ["60%"],
        hoverAnimation: false,
        center: ["50%", "50%"],
        itemStyle: {
          color: "rgba(66, 66, 66, .1)",
          borderWidth: 1,
          borderColor: "#5269EE",
        },
        data: [100],
      },
      {
        name: "",
        type: "pie",
        startAngle: 80,
        radius: ["80%"],
        hoverAnimation: false,
        center: ["50%", "50%"],
        itemStyle: {
          color: "rgba(66, 66, 66, .1)",
          borderWidth: 1,
          borderColor: "#5269EE",
        },
        data: [100],
      },
    ],
  };
}
export function echarts3(name,vlaue) {
  var data = vlaue;
  var titlename = name;
  var myColor = ["#d72e43", "#e535ff", "#fee190", "#34ecff"];
  return {
    //图标位置
    grid: {
      top: "5%",
      left: "5%",
      bottom: "-25",
      containLabel: true,
    },
    xAxis: {
      show: false,
    },
    yAxis: [
      {
        show: true,
        data: titlename,
        inverse: true,
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#fff",

          rich: {
            lg: {
              backgroundColor: "#339911",
              color: "#fff",
              borderRadius: 15,
              // padding: 5,
              align: "center",
              width: 15,
              height: 15,
            },
          },
        },
      },
      {
        show: false,
        inverse: true,
        data: data,
        axisLabel: {
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
        },
      },
    ],
    series: [
      {
        name: "条",
        type: "bar",
        yAxisIndex: 0,
        data: data,
        barCategoryGap: 50,
        barWidth: 10,
        itemStyle: {
          normal: {
            barBorderRadius: 0,
            color: function (params) {
              var num = myColor.length;
              return myColor[params.dataIndex % num];
            },
          },
        },
        label: {
          show: true,
          position: "right",
          formatter: "{c}人",
          fontSize: "12",
          fontWeight: "normal",
          color: "#fff",
        },
      },
    ],
  };

}
export function echarts4(x,y) {
  return {
    grid: {
      left: "3%",
      right: "5%",
      bottom: "0",
      top: "10%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: x,
      axisTick: {
        show: true,
      },
      axisLabel: {
        color: "rgba(255,255,255,.7)",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      type: "value",
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "rgba(255,255,255,.7)",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#fff",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#012f4a",
        },
      },
    },
    series: [
      {
        data: y,
        type: "line",
        itemStyle: {
          normal: {
            lineStyle: {
              color: "#8ee3f4",
            },
          },
        },
      },
    ],
  }
}
export function echarts5(data,unit) {
  return {
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        type: "pie",
        radius: ["30%", "60%"],
        center: ['55%', '50%'],
        avoidLabelOverlap: false,
        startAngle: 200,
        color: ["#0ea6e6", "#4de7e4", "#4b88dc"],
        label: {
          formatter: "{b}\n{c}"+unit,
          fontSize: "12",
          fontWeight: "normal",
          color: "#fff",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "16",
            fontWeight: "bold",
            color: "#fff",
          },
        },
        labelLine: {
          show: true,
          length: 10,
          length2: 20,
        },
        data: data,
      },
    ],
  };
}
export function echarts6(data) {
  return {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    color: ['#1779d5','#3cd9d3','#5ba1ed'],
    legend: {
      orient: "vertical", 
      x: "right", 
      left: "70%",
      bottom: "30%",
      itemWidth: 15,
      itemHeight: 15,
      textStyle: {
        color: "#00dcfa",
        fontSize: 14,
      },
      formatter: function (name) {
        let target;
        let all = data.reduce((pre, cur) => {
          return pre + cur.value
        },0)
        for (var i = 0, l = data.length; i < l; i++) {
          if (data[i].name == name) {
            target = ((data[i].value / all) * 100).toFixed(0);
          }
        }
        return `${name}  ${target}%`;
      }
    },
    series: [
      {
        name: "访问来源",
        type: "pie",
        selectedMode: "single",
        radius: ["20%", "70%"],
        center: ["45%", "50%"],

        label: {
          position: "inner",
          fontSize: "14",
          fontWeight: "bold",
          color: "#fff",
        },
        labelLine: {
          show: false,
        },
        data: data,
      }
    ],
  };
}
export function echarts7(data) {
  return {
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "80%"],
        avoidLabelOverlap: false,
        startAngle: 200,
        color: ["#0ea6e6", "#4de7e4", "#4b88dc"],
        label: {
          fontSize: "14",
          fontWeight: "normal",
          color: "#fff",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "14",
            fontWeight: "bold",
            color: "#fff",
          },
        },
        labelLine: {
          show: true,
          length: 10,
          length2: 20,
        },
        data: data,
      },
    ],
  };
}
export function echarts8(date,data) {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    color: ['#186ed0','#0eb0a1','#62acf5'],
    legend: {
      top: 10,
      textStyle: {
        color: "rgb(255,255,255,1)",
      },
    },
    grid: {
      top: '20%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      axisLine: {
        show: true,
        lineStyle: {
          color: '#6a8bbc'
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: true
      }
    },
    yAxis: {
      type: 'category',
      data: date,
      axisLabel: {
        show: true
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#6a8bbc'
        }
      },
    },
    series: data
  };
}